import React from 'react';
import styles from './index.less';
import moment from 'moment';

// 随机颜色
var getRandomColor = function() {
  return (
    'rgb(' +
    Math.round(Math.random() * 255) +
    ',' +
    Math.round(Math.random() * 255) +
    ',' +
    Math.round(Math.random() * 10) +
    ')'
  );
};

// 后端返回的数据结构
var data = {
  vesselReference: 'DFGLM80',
  vesselDirection: 0,
  vesselStartTime: '2021-09-23 00:00:00',
  vesselEndTime: '2021-09-24 00:00:00',
  craneWorkList: [
    {
      bay: '30',
      totalWiCount: 10,
      workQueueList: [
        {
          craneId: '1',
          bay: '30',
          workInstructionCount: 18,
          endWorkTime: '2021-09-23 03:08:00',
          startWorkTime: '2021-09-23 02:29:00',
        },

        {
          craneId: '1',
          bay: '30',
          workInstructionCount: 18,
          endWorkTime: '2021-09-23 14:08:00',
          startWorkTime: '2021-09-23 06:29:00',
        },
      ],
    },

    {
      bay: '40',
      totalWiCount: 10,
      workQueueList: [
        {
          craneId: '1',
          bay: '40',
          workInstructionCount: 18,
          endWorkTime: '2021-09-23 03:08:00',
          startWorkTime: '2021-09-23 02:29:00',
        },

        {
          craneId: '1',
          bay: '40',
          workInstructionCount: 23,
          endWorkTime: '2021-09-23 14:08:00',
          startWorkTime: '2021-09-23 06:29:00',
        },
      ],
    },

    {
      bay: '50',
      totalWiCount: 10,
      workQueueList: [
        {
          craneId: '1',
          bay: '50',
          workInstructionCount: 18,
          endWorkTime: '2021-09-23 03:08:00',
          startWorkTime: '2021-09-23 02:29:00',
        },

        {
          craneId: '1',
          bay: '50',
          workInstructionCount: 23,
          endWorkTime: '2021-09-23 14:08:00',
          startWorkTime: '2021-09-23 06:29:00',
        },
      ],
    },

    {
      bay: '60',
      totalWiCount: 10,
      workQueueList: [
        {
          craneId: '1',
          bay: '60',
          workInstructionCount: 18,
          endWorkTime: '2021-09-23 03:08:00',
          startWorkTime: '2021-09-23 02:29:00',
        },

        {
          craneId: '1',
          bay: '60',
          workInstructionCount: 23,
          endWorkTime: '2021-09-23 20:08:00',
          startWorkTime: '2021-09-23 14:29:00',
        },
      ],
    },
  ],
};

export default class extends React.Component {
  color = {};
  state = {
    initGanttChart: false,
    data: null,
    list: [],
  };
  componentDidMount = async () => {
    this.init();
  };
  init = async () => {
    this.color = {};
    this.setState({ data: data }, () => {
      this.initGanttChart();
    });
  };
  initGanttChart = () => {
    const { data } = this.state;
    var startTime = new Date(data.vesselStartTime).getTime();
    var endTime = new Date(data.vesselEndTime).getTime();

    // 内容数据
    var list = [];
    data.craneWorkList.forEach((item, i) => {
      var obj = {
        bay: item.bay,
        totalWiCount: item.totalWiCount,
        child: [],
      };
      item.workQueueList.forEach(ite => {
        obj.child.push({
          ...ite,
          color: this.getColor(ite.craneId),
        });
      });
      list.push(obj);
    });
    this.setState({ list:list,initGanttChart:true})
  };
  getColor = craneId => {
    if (!craneId) return getRandomColor();
    if (!this.color[craneId]) {
      this.color[craneId] = getRandomColor();
    }
    return this.color[craneId];
  };
  render() {
    
    // 算出时间刻度
    var startTime = new Date('2021/10/10').getTime();
    var endTime = new Date('2021/10/12').getTime();
    var num = parseInt((endTime - startTime) / 3600000);
    var times = [];
    for (let i = 0; i < num; i++) {
      times.push(startTime + i * 3600000);
    }

    var attr = [
      {
        craneId: '1',
        bay: '60',
        workInstructionCount: 23,
        startWorkTime: '2021-10-10 00:00:00',
        endWorkTime: '2021-10-11 00:00:00',
      },

      {
        startWorkTime: '2021-10-11 03:00:00',
        endWorkTime: '2021-10-11 06:00:00',
      },
    ];
    if (!this.state.initGanttChart) return '';
    return (
      <div className={styles.container}>
        <div className={styles.dateBg}></div>
        <div className={styles.title}>
          <div>贝位</div>
          <div>任务量</div>
        </div>
        <div className={styles.times}>
          {times.map((item, i) => {
            var timeStr = moment(item).format('HH: mm');
            return (
              <div className={styles.timeItem}>
                {timeStr}
                {timeStr == '00: 00' && (
                  <div className={styles.date}>
                    <div className={styles.dateCont}>
                      {moment(item).format('MMM Do')}
                    </div>
                  </div>
                )}
              </div>
            );
          })}
        </div>
        <div className={styles.bays}>
          {
            
          }
          <div className={styles.bay}>
            <div className={styles.bayTitle}>
              <div>02</div>
              <div>30</div>
            </div>

            <div className={styles.links}>
              {attr.map((item, i) => {
                // 算出高度
                var start = new Date(item.startWorkTime).getTime();
                var end = new Date(item.endWorkTime).getTime();
                var height = ((end - start) / (endTime - startTime)) * 100;

                // 算出top距离
                var top = ((start - startTime) / (endTime - startTime)) * 100;

                var style = {
                  height: `calc(${height}% + 16px)`,
                  top: `calc(${top}% + 2px)`,
                  backgroundColor: 'red',
                };
                return <div className={styles.link} style={style}></div>;
              })}
            </div>
          </div>
        </div>
      </div>
    );
  }
}


getColor = craneId => {
  // const { colors } = this.state;
  // if (!this.color[craneId]) {
  //   var color = '';
  //   Object.keys(colors).forEach((item, i) => {
  //     if (!color && this.color[item]) color = colors[item];
  //   });
  //   console.log(colors)
  //   this.color[craneId] = color ? color : getRandomColor();
  // }
  return this.color[craneId];
};